<template>
  <div>
    <!-- 顶部：分类 搜索 增加 导出 -->
    <div class="filter-container">
      <el-select v-model="query.category_id" placeholder="选择分类" @change="handleSearch">
       <el-option v-for="item in categoryList" :key="item.id"
        :label="item.title"
        :value="item.id">
       </el-option>
      </el-select>

      <el-input v-model="query.keyWord" placeholder="输入搜索" style="width: 140px" @keyup.enter.native="handleSearch">
      </el-input>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button type="primary" style="margin-left: 10px;" icon="el-icon-edit" @click="handleAdd">
        增加
      </el-button>
    </div>

    <!-- 数据列表 编辑 删除 -->
    <div class="list-container">
      <el-table :data="dataList" border fit highlight-current-row>
        <el-table-column label="ID" prop="id" width="40" align="center"></el-table-column>
        <el-table-column label="商品编号" prop="product_id" align="center"></el-table-column>
        <el-table-column label="用户名" prop="name"width="100" align="center"></el-table-column>
        <el-table-column label="头像" align="center" width="140">
          <template slot-scope="scope">
            <el-image class="table-td-image" :src="fullUrl(scope.row.avatar)" :preview-src-list="[`${fullUrl(scope.row.avatar)}`]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="评论" prop="detail" width="360"></el-table-column>
        <el-table-column label="时间" prop="date"width="100"></el-table-column>
        <el-table-column label="图片" align="center" width="140">
          <template slot-scope="scope">
            <el-image class="table-td-image" :src="fullUrl(scope.row.pic)" :preview-src-list="[`${fullUrl(scope.row.pic)}`]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleUpdate(scope.row.id)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index,scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
          :page-size="query.pageSize" :total="recordTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <forum-edit
      v-if="editDialogVisible" ref="editDialog" @refreshDataList="loadDataList"
      :category_id="query.category_id"
      :categoryList="categoryList"
    ></forum-edit>
  </div>
</template>

<script>
  import * as ForumAPI from "@/api/forum.js";
  import * as CategoryAPI from "@/api/product.js";
  import ForumEdit from './components/ForumEdit.vue';
  import dayjs from 'dayjs';
  export default {
    name: "forumList",
    components: {
    ForumEdit
    },
    data() {
      return {
        dataList: [], //列表数据
        categoryList: [], //分类选项数据
        query: {
       product_id: 0,
          keyWord: "",
          pageIndex: 1,
          pageSize: 10,
        },
        recordTotal: 0,

        //导出,还没实现
        exportLoading: false,

        //编辑框是否显示
        editDialogVisible: false,
        // form: {family_id : 0},
      };
    },

    created() {
      // 获取分类信息数据，初始分类选择组件数据
      CategoryAPI.getProductList().then(result => {
        this.categoryList = result.data;
        if (this.categoryList.length > 0) {
          this.query.product_id = this.categoryList[0].id;
          this.loadDataList(); // 初始列表数据
        }
      });
    },

    methods: {
      // 获取列表数据
      loadDataList() {
        ForumAPI.getForumList(this.query).then(result => {
          this.dataList = result.data;
          this.recordTotal = result.recordTotal;
          // 转换日期格式
          this.dataList.forEach(item=>{
            item.date = dayjs(item.date).format('YYYY-MM-DD');
          })
        });
      },

      // 触发搜索按钮
      handleSearch() {
        this.query.pasgeIndex = 1;
        this.loadDataList();
      },

      // 增加记录
      handleAdd() {
        this.editDialogVisible = true;
        this.$nextTick(() => {
          this.$refs.editDialog.init(0); //id==0表示新增
        });
      },
      // 删除操作
      handleDelete(index,id) {
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          // 选择了确认，则删除后端数据库中的记录
          ForumAPI.deleteById(id).then(() => {
            this.dataList.splice(index, 1); //同步列表中的记录
            this.$message.success('删除成功');
          }).catch(() => {});
        }).catch(() => {});
      },

      // 编辑操作，id为编辑记录的ID
      handleUpdate(id) {
        this.editDialogVisible = true;
        this.$nextTick(() => {
          this.$refs.editDialog.init(id);
        });
      },
 //加上BaseAPI生成图片完整Url
    fullUrl(img) {
      return `${this.BaseAPI}${img}`;
    },
      // // 图片操作，路由传参 跳转商品图片列表页面
      // handleUpdateImage(row) {
      //   let product_id = row.id;//获取商品id
      //   let product_title = row.title;//获取商品标题
      //   this.$router.push({path:"/product/image",query:{product_id,product_title}});
      // },

      // 分页导航=======================================
      handlePageChange(val) {
        this.query.pageIndex = val;
        this.loadDataList();
      },
    },
  };
</script>

<style scoped>
</style>
